<template>
  <div class="print_wrap">
    <div
      class="print_loading"
      v-loading.fullscreen.lock="fullscreenLoading"
      element-loading-text="加载..."
    >
      <div class="print_btn">
        <el-button size="mini" type="warning" :disabled="!id" @click.stop="downLoad">下载</el-button>
        <el-button size="mini" type="warning" :disabled="!id" @click.stop="handlePrint">打印</el-button>
      </div>
      <div class="print_cont">
        <div class="print_box">
          <div ref="printCont" class="report_wrap">
            <div class="report_hd">
              <!-- <div class="ewm_box">
              <div ref="qrCodeUrl" id="qrcode"></div>
              <p>扫一扫查看报告</p>
              </div>-->
              <div class="report_title">
                <h3>{{applyModel.hospitalName}}</h3>
                <p>{{applyModel.depName}} 诊断意见报告单</p>
              </div>
              <div class="report_info">
                <div class="ri_row">
                  <div class="ri_item ri_item_col2">
                    <div class="ri_label">会诊编号：</div>
                    <div class="ri_txt">{{id}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="patient_info">
              <div class="ri_row">
                <div class="ri_item">
                  <div class="ri_label">
                    <span class="ri_label_Justify">姓名</span>：
                  </div>
                  <div class="ri_txt ri_txt_100">{{patinfo.patName}}</div>
                </div>
                <div class="ri_item">
                  <div class="ri_label">
                    <span class="ri_label_Justify">性别</span>：
                  </div>
                  <div class="ri_txt ri_txt_100">{{patinfo.patSex}}</div>
                </div>
                <div class="ri_item">
                  <div class="ri_label">
                    <span class="ri_label_Justify">年龄</span>：
                  </div>
                  <div class="ri_txt ri_txt_100">{{patinfo.patAge | formatAge}}</div>
                </div>
              </div>
              <div class="ri_row">
                <div class="ri_item">
                  <div class="ri_label">
                    <span class="ri_label_Justify">患者类型</span>：
                  </div>
                  <div class="ri_txt ri_txt_100">
                    <div class="ri_txt_dot">
                      <span class="ri_txt_bg">{{patinfo.patientType}}</span>
                    </div>
                  </div>
                </div>
                <div class="ri_item">
                  <div class="ri_label">
                    <span class="ri_label_Justify">患者病情</span>：
                  </div>
                  <div class="ri_txt ri_txt_100">{{patinfo.patientCondition}}</div>
                </div>
              </div>
              <div class="ri_row">
                <div class="ri_item">
                  <div class="ri_label">
                    <span class="ri_label_Justify">会诊类型</span>：
                  </div>
                  <div
                    class="ri_txt ri_txt_100"
                  >{{applyModel.consultationType | formatConsultationType}}</div>
                </div>
                <div class="ri_item">
                  <div class="ri_label">
                    <span class="ri_label_Justify">申请类型</span>：
                  </div>
                  <div class="ri_txt ri_txt_100">{{applyModel.applyType | formatApplyType}}</div>
                </div>
              </div>
            </div>
            <div class="diagnosis_info">
              <div class="di_info">
                <dl>
                  <dt>诊断意见:</dt>
                  <dd>{{applyModel.diagnosis}}</dd>
                </dl>
              </div>
              <div class="di_info">
                <dl>
                  <dt>治疗建议:</dt>
                  <dd>{{applyModel.proposal}}</dd>
                </dl>
              </div>
              <div class="di_info">
                <dl>
                  <dt>特别提示:</dt>
                  <dd>{{applyModel.tips}}</dd>
                </dl>
              </div>
              <div class="ri_row">
                <div class="ri_item" style="width:40%">
                  <div class="ri_label">申请时间：</div>
                  <div class="ri_txt">{{applyModel.applyTime | dateFormatter}}</div>
                </div>
                <div class="ri_item" style="width: 28%">
                  <div class="ri_label">申请医生：</div>
                  <div class="ri_txt">{{applyModel.userName}}</div>
                </div>
                <div class="ri_item" style="width:32%">
                  <div class="ri_label" v-if="targetFlag">会诊方：</div>
                  <div class="ri_label" v-else>会诊医生：</div>
                  <div class="ri_txt">{{consultantTxt}}</div>
                </div>
              </div>
            </div>
            <div class="footer_wrap">
              <div class="tips">
                <span>备注：</span>本报告仅供本院临床科室参考
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getRemoteApplyPatInfo,
  getRemoteExpertDiagnosisList,
  getApplyModel
} from '@/api/api.js'
import { dateFormatter, formatConsultationType, formatApplyType } from '@/utils/validate'
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  data() {
    return {
      fullscreenLoading: false,
      patinfo: {}, // 患者信息
      applyModel: {}, // 会诊单信息
      consultantDoctor: [], // 会诊放信息
      type: '',
      title: '',
      id: '', // 会诊单id
      pid: '', // 患者id
      targetInfo: {
        // 申请会诊方团队/医院/科室
        TeamName: '',
        TeamId: '',
        HospitalName: '',
        HospitalId: '',
        DepName: '',
        DepartmentId: ''
      },
      targetFlag: false,
      consultantTxt: ''
    }
  },
  created() {
    this.id = this.$route.query.id
    // console.log(this.$route.path)
    this.title = this.$route.query.title ? this.$route.query.title : document.title
    this.type = this.$route.query.type
    document.title = this.title
    // 更改url地址不刷新页面
    // history.replaceState('', '', this.$route.path)
    this.getApplyInfo()
  },
  methods: {
    // 下载
    downLoad() {
      html2Canvas(this.$refs.printCont, {
        backgroundColor: null,
        useCORS: true,
        windowHeight: document.body.scrollHeight
      }).then((canvas) => {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        // let pageData = canvas.toDataURL('image/jpeg', 1.0)
        let pageData = canvas.toDataURL()
        let PDF = new JsPDF('', 'pt', 'a4')
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 10, 10, imgWidth - 10, imgHeight - 10)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        PDF.save(this.title + '.pdf')
      })
    },
    fetchData() {
      this.fullscreenLoading = true
      setTimeout(() => {
        this.fullscreenLoading = false
        this.$nextTick(() => {
          if (this.type === 'print') {
            this.$print(this.$refs.printCont)
          } else if (this.type === 'download') {
            this.downLoad()
          }
        })
      }, 2000)
    },
    handlePrint() {
      this.$print(this.$refs.printCont)
    },
    // 获取会诊单信息
    getApplyInfo() {
      const that = this
      const params = {
        ID: that.id
      }
      if (!this.id) return
      getApplyModel(params).then(res => {
        if (res && res.code === 10000) {
          if (res.content) {
            that.applyModel = res.content
            that.pid = res.content.patientId
            // 会诊方团队
            that.targetInfo.TeamName = res.content.targetTeamName
            that.targetInfo.TeamId = res.content.targetTeamId
            that.targetInfo.HospitalName = res.content.targetHospitalName
            that.targetInfo.HospitalId = res.content.targetHospitalId
            that.targetInfo.DepName = res.content.targetDepName
            that.targetInfo.DepartmentId = res.content.targetDepartmentId
            // 获取会诊方医生列表
            that.getApplyPatInfo()
            that.getDoctorList()
          }
        }
      })
    },
    // 获取会诊患者信息
    getApplyPatInfo() {
      const that = this
      const params = {
        ID: that.pid
      }
      getRemoteApplyPatInfo(params).then(res => {
        if (res.code === 10000) {
          if (res.content) {
            that.patinfo = res.content
          }
        }
      })
    },
    // 获取会诊方医生列表
    getDoctorList(applyid) {
      const that = this
      const _applyid = that.id
      if (_applyid) {
        getRemoteExpertDiagnosisList({ applyId: _applyid }).then(res => {
          if (res && res.code === 10000) {
            that.consultantDoctor = res.content.list
            that.consultantTxtFun()
          }
        })
      }
    },
    consultantTxtFun() {
      if (this.consultantDoctor.length > 0) {
        this.targetFlag = false
        if (this.consultantDoctor.length === 1) {
          this.consultantTxt = this.consultantDoctor[0].userName
        } else {
          this.consultantTxt = this.consultantDoctor[0].userName
        }
      } else {
        const _t = this.targetInfo.TeamName
        const _h = this.targetInfo.HospitalName
        const _d = this.targetInfo.DepName
        if (_t || _h || _d) {
          this.targetFlag = true
          this.consultantTxt = _t + ' ' + _h + ' ' + _d
        }
      }
      this.fetchData()
    }
  },
  filters: {
    formatConsultationType,
    formatApplyType,
    dateFormatter,
    formatSex(value, row, index) {
      switch (value) {
        case 1:
          return '男'
        case 2:
          return '女'
        case 'M':
          return '男'
        case 'F':
          return '女'
        default:
          return value
      }
    },
    formatAge(value) {
      if (!value) { return '' }
      if (value.indexOf('Y') >= 0) {
        return value.replace(/\Y/g, '岁')
      } else if (value.indexOf('M') >= 0) {
        return value.replace(/\M/g, '月')
      } else if (value.indexOf('D') >= 0) {
        return value.replace(/\D/g, '日')
      } else {
        return value
      }
    }
  }
}
</script>

<style lang="scss" scoped>
h3,
p,
dl,
dt,
dd {
  padding: 0;
  margin: 0;
}
.print_wrap {
  height: calc(100vh);
  background-color: #f9f9f9;
  overflow-y: scroll;
}
.print_btn {
  width: 100%;
  max-width: 900px;
  padding: 10px;
  text-align: right;
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 10;
}
.print_cont {
  margin: 0 auto;
  min-width: 680px;
  max-width: 930px;
  background-color: #fff;
  padding: 0 20px;
}
.report_wrap {
  margin: 0 auto;
  min-width: 680px;
  max-width: 930px;
  min-height: 820px;
  background-color: #fff;
  // padding: 30px 20px;
  // font-family: 黑体, SimHei;
  .report_hd {
    border-bottom: solid 1px #333;
    position: relative;
    .report_title {
      text-align: center;
      padding: 30px 0 30px;
      h3 {
        font-size: 26px;
        // font-weight: 500;
        margin-bottom: 30px;
      }
      p {
        font-size: 22px;
      }
    }
    .ewm_box {
      width: 120px;
      position: absolute;
      right: 20px;
      top: 10px;
      #qrcode {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        img {
          padding: 10px;
        }
      }
      p {
        font-size: 14px;
        color: #333;
        text-align: center;
      }
    }
  }
  .report_info {
    padding: 6px 0;
  }
  .patient_info {
    padding: 10px 0;
    border-bottom: solid 1px #333;
  }
  .diagnosis_info {
    padding: 10px 0;
    border-bottom: solid 1px #333;
    .di_info {
      min-height: 210px;
      padding: 0 16px;
      dl {
        dt {
          font-size: 16px;
          font-weight: bold;
        }
        dd {
          font-size: 16px;
          padding: 10px 0;
          text-indent: 2em;
          line-height: 1.5em;
        }
      }
    }
  }
  .footer_wrap {
    padding: 10px 16px;
    .tips {
      font-size: 14px;
      span {
        font-weight: bold;
      }
    }
  }
  .ri_row {
    overflow: hidden;
    font-size: 16px;
    padding: 0 16px;
    .ri_item {
      float: left;
      width: 33.33%;
      line-height: 32px;
    }
    .ri_label {
      float: left;
      height: 32px;
      line-height: 32px;
      .ri_label_Justify {
        display: inline-block;
        height: 100%;
        width: 68px;
        text-align: justify;
        vertical-align: top;
        &::after {
          display: inline-block;
          width: 100%;
          content: "";
          height: 0;
        }
      }
    }
    .ri_txt {
      padding-left: 80px;
      line-height: 20px;
      margin-top: 6px;
    }
    .ri_txt_100 {
      padding-left: 86px;
    }
    .ri_txt_bg {
      padding: 4px 0;
      // background-color: #f0f8ff;
    }
    .ri_item_col2 {
      width: 66.66%;
      .ri_txt_dot {
        margin-top: 2px;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
</style>
